<template>
	<view class="app_tab">
		<view class="tab_item" v-for="(item,index) in tabList" :key="index" @click="tabFun(index)">
			<image class="app_tab_img" v-if="flag" :src="tabIndex === index?item.selectedIconPath:item.iconPath"
				mode="widthFix">
			</image>
			<p :style="tabIndex === index?'color:#856FFF;':'color:#D4DBE2;'">{{item.text}}</p>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tabIndex: {
				type: Number,
				default: -1
			},
		},
		data() {
			return {
				flag: true,
				tabList: [{
						"pagePath": "/pages/home/home",
						"iconPath": "../../static/home/home1.png",
						"selectedIconPath": "../../static/home/home.png",
						"text": "首页"
					},
					{
						"pagePath": "/pages/consult/consult",
						"iconPath": "../../static/home/zixuen1.png",
						"selectedIconPath": "../../static/home/zixuen.png",
						"text": "咨询"
					}, {
						"pagePath": "/pages/deal/deal",
						"iconPath": "../../static/home/maimai1.png",
						"selectedIconPath": "../../static/home/maimai.png",
						"text": "交易"

					},
					{
						"pagePath": "/pages/wallet/wallet",
						"iconPath": "../../static/home/qianbao1.png",
						"selectedIconPath": "../../static/home/qianbao.png",
						"text": "钱包"
					},
					{
						"pagePath": "/pages/mine/mine",
						"iconPath": "../../static/home/wode1.png",
						"selectedIconPath": "../../static/home/wode.png",
						"text": "我的"
					}
				]
			};
		},
		onShow() {},
		methods: {
			tabFun(i) {
				uni.switchTab({
					url: this.tabList[i].pagePath
				})
			}
		}
	}
</script>

<style lang="scss">
	.app_tab {
		width: 100%;
		height: 100rpx;
		// position: fixed;
		// bottom: 0;
		display: flex;
		z-index: 100000;
		background-color: #fff;
		justify-content: space-around;
		align-items: center;
		background-position: center 160rpx;
		background-size: 100%;

		.tab_item {
			width: 25%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 30rpx;

			.app_tab_img {
				width: 40rpx;
				margin: 10rpx 0;
			}
		}
	}
</style>